import React ,{ Component ,createContext,lazy,Suspense,PureComponent} from "react"
import { Table, Divider, Tag } from 'antd';
import TableList from "./table";
import "./index.less"
import { data } from "./tableList";
const About =lazy(()=>import(/*webpackChunkName:"about"*/'./test.jsx'))
const Hoock =lazy(()=>import(/*webpackChunkName:"Hoock"*/'./hoock.jsx'))
const Acont=createContext()
// const ACONTTWO=createContext()

class AA extends PureComponent{
  static contextType=Acont
  render(){
  console.log("更新吗")
    const adad=this.context
    const data1=[1,2,3,4,5]
   return <div className="contain">
           <div>
               <li>a:{adad}</li>
               <li>{this.props.age}</li>
            </div>
            <ul>
               { 
                data1.map((index)=>{
                  return <li key={index}>{index}</li>
                })
               }
            </ul>
            {/* <ACONT.Consumer>
                {
                  n=> <li>{n}</li>
                }
            </ACONT.Consumer> */}

            {/* <ACONTTWO.Consumer>
              {n=><li>{n}</li>}
            </ACONTTWO.Consumer> */}
     </div>
  }
}
// class BB extends Component{
//   render(){
//    return <div className="contain">
//            <AA></AA>
//      </div>
//   }
// }
class Test extends Component{
  state={  
    value:60,
    hasError:false,
    age:1,
  }
  setKeep=()=>{
       this.setState({age:this.state.age++})
  }
  componentDidCatch(){
    this.setState({
      hasError:true
    })
  }

   render(){
    const {value,age}=this.state
    return <div className="contain">
      {/* 异步测试代码 */}
      {/* <Suspense fallback={<div>loading</div>}>
          <About></About>
      </Suspense>
      <Acont.Provider value={value}>
      <button onClick={()=>this.setState({value:value+1})}>add</button>
       <AA age={age}></AA>
      </Acont.Provider>
      <button onClick={()=>this.setState({age1:age+1})}>123123</button>


      <Suspense fallback={<div>loading</div>}>
          <Hoock></Hoock>
      </Suspense> */}
      {/* <Table  columns={columns} dataSource={data} /> */}

      <TableList></TableList>
      </div>
   }
}

export default Test